<template>
  <p class="p">按需定制</p>
  <van-grid :column-num="3" :border="false" icon-size="67px">
    <van-grid-item
      v-for="(item, index) in data.list"
      :key="index"
      :icon="item.url"
      :text="item.msg"
    />
  </van-grid>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const data = reactive({
      list: [
        {
          url: "http://121.40.124.132:3000/images/cus/dingzhi1.png",
          msg: "白成一道光",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/dingzhi2.png",
          msg: "年年十八岁",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/dingzhi3.png",
          msg: "逃离月球表面",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/dingzhi4.png",
          msg: "干掉草莓鼻",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/dingzhi5.png",
          msg: "我要水光肌",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/dingzhi6.png",
          msg: "拜拜啦敏感",
        },
      ],
    });
    return {
      data,
    };
  },
};
</script>

<style lang="less" scoped>
.p {
  font-size: 16px;
  font-weight: 900;
  margin-left: 16px;
  margin-bottom: 10px;
}
span {
  font-size: 10pt;
  font-weight: 900;
}
</style>
